<template>
  <div>
    <el-card class="box-card card-size">
      <el-button class="btn-go" type="primary" size="mini" @click="goBack">
        <el-icon class="el-icon-arrow-left"/>
      </el-button>
      <el-tabs class="tabs-box" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane disabled label="全部" name="0"/>
        <el-tab-pane
            disabled
            :key="index"
            v-for="(item, index) in typeList"
            :label="item.typeName"
            :name="item.id.toString()">
        </el-tab-pane>
      </el-tabs>
      <span class="btn-box">
        <el-button class="view-btn" @click="goBack" type="primary" size="mini"
                   icon="el-icon-s-operation"></el-button>
        <el-button class="add-btn" type="primary" @click="handleAdd" size="mini">新增</el-button>
        <el-button class="search-btn" type="primary" size="mini" icon="el-icon-search"></el-button>
      </span>
      <DetailDialog :open="open"
                    :title="title"
                    :typeList="productTypeList"
                    :form="form"
                    @closeDialog="closeDialog"
                    @onSubmit="onSubmit">
      </DetailDialog>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="9">
        <el-card style="margin: 0 0 20px 20px">
          <el-tabs v-model="activeName_1" @tab-click="handleClick">
            <el-tab-pane label="产品信息" name="1">
              <DetailInfo v-if="isDetail"></DetailInfo>
            </el-tab-pane>
            <el-tab-pane label="告警设置" name="2">

            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
      <el-col :span="15">
        <el-card style="margin: 0 20px 20px 0">
          <el-tabs v-model="activeName_2" @tab-click="handleClick">
            <el-tab-pane label="位置信息" name="1">
              <Map v-if="isMap"></Map>
            </el-tab-pane>
            <el-tab-pane label="设备动态" name="2">

            </el-tab-pane>
            <el-tab-pane label="告警记录" name="3">

            </el-tab-pane>
            <el-tab-pane label="物理型" name="4">

            </el-tab-pane>
            <el-tab-pane label="反向控制" name="5">

            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {addProduct, getTypeList} from "@/api/detail";

export default {
  components: {
    DetailInfo: () => import('@/views/device/detail/component/info.vue'),
    Map: () => import('@/views/device/detail/component/map.vue'),
    DetailDialog: () => import('@/views/device/detail/component/dialog.vue')
  },
  data() {
    return {
      isMap: true,
      isDetail: true,
      activeName: this.$route.query.activeName,
      typeList: this.$route.query.types,
      activeName_1: '1',
      activeName_2: '1',
      deviceData: this.$route.query.rows,
      open: false,
      title: '',
      productTypeList: [],
      form: {
        address: "",
        longitude: '',
        latitude: '',
        province: '',
        city: '',
        area: '',
        did: null,
        pid: null,
        productName: '',
        productNo: '',
        messageProtocol: '',
        status: 1,
        linkProtocol: '',
        affiliatedInstitution: '',
        deviceType: '',
      }
    }
  },
  created() {
    this.getProductTypeList()
  },
  provide() {
    return {
      reloadMap: this.reloadMap
    }
  },
  methods: {
    handleClick() {
    },
    goBack() {
      this.$router.push({path: '/device/index', query: {activeName: this.activeName}})
    },
    handleAdd() {
      this.open = true
      this.title = '新增产品信息'
    },
    closeDialog() {
      this.open = false
    },
    getProductTypeList() {
      getTypeList().then(res => {
        this.productTypeList = res.data;
      })
    },
    onSubmit() {
      this.form.did = this.deviceData.id
      addProduct(this.form).then(res => {
        this.$message({
          message: '新增成功',
          type: 'success',
          duration: 1000
        });
        this.open = false
        this.reloadMap()
        this.reloadDetail()
      })
    },
    reloadMap() {
      this.isMap = false
      this.$nextTick(() => {
        this.isMap = true
      })
    },
    reloadDetail() {
      this.isDetail = false
      this.$nextTick(() => {
        this.isDetail = true
      })
    },
  }
}
</script>

<style scoped>
.box-card {
  margin: 20px;
}

.card-size {
  height: 75px;
}

.tabs-box {
  margin-left: 40px;
  margin-top: -10px;
  width: 82%;
}

.btn-go {
  position: absolute;
  display: flex;
  width: 10px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.btn-box {
  float: right;
}

.view-btn, .add-btn, .search-btn {
  position: relative;
  bottom: 35px;
  left: 10px;
}

.el-select {
  width: 90%;
}

.el-input {
  width: 90%;
}

.el-popover {
  position: relative;
}

.checkbox-box {
  position: relative;
  left: 75px;
  top: -28px;
}
</style>
